<template>
  <div class="product">
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">经营异常报告</div>
        <!--        <div>-->
        <!--          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />-->
        <!--          <el-button type="primary" size="mini" @click="pooAmount">搜索</el-button>-->
        <!--        </div>-->
      </div>
      <div>
        <jc-table
          serial
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="300px"
        />
      </div>
    </div>
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">{{ $t('market.protask') }}<!--生产任务进度报表--></div>
        <div>
          <el-date-picker
            v-model="value1"
            type="month"
            size="mini"
            value-format="yyyy-MM"
          />
          <el-button class="btn" type="primary" size="mini" @click="productask">{{ $t('btn.reload') }}</el-button>
        </div>
      </div>
      <jc-table
        :table-data="tableData1"
        :table-header="tableHeader1"
        table-height="80px"
        @cellClick="cellClick"
      >
        <el-table-column :label="$t('market.fdate')" prop="state" align="center" />
        <el-table-column
          v-for="(item, index) in 31"
          :key="index"
          :label="item+''"
          :prop="item+''"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row[item]==='未完成'" type="warning">{{ scope.row[item] }}</el-tag>
            <el-tag v-else-if="scope.row[item]==='已完成'" type="success">{{ scope.row[item] }}</el-tag>
          </template>
        </el-table-column>
      </jc-table>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div class="options_1">
          {{ $t('market.salerSchedule') }}<!--销售生产进度报表-->
          <filtration
            :condition="1"
            ftype="xsscjd"
            :table-header="tableHeader5"
            :detail-header="tableHeader5"
            @seachData="headlines5"
          />
        </div>
        <div>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            size="mini"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
          <el-button class="btn" type="primary" size="mini" @click="headlines5">{{ $t('btn.search') }}</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData5"
        :table-header="tableHeader5"
        table-height="350px"
      >
        <template v-slot:tagSlot="col">
          <el-link type="primary" @click="pushView(col.scope.row.productionNo)">{{ col.scope.row.productionNo }}</el-link>
        </template>
        <template v-slot:text2Slot="col">
          <el-tag v-if="col.scope.row.lowerStatus === '未开始'" type="danger">{{ $t('market.notStarted') }}</el-tag>
          <el-tag v-else-if="col.scope.row.lowerStatus === '生产中'">{{ $t('market.inProduct') }}</el-tag>
          <el-tag v-else-if="col.scope.row.lowerStatus === '已完成'" type="success">{{ $t('market.offStock') }}</el-tag>
        </template>
        <template v-slot:text3Slot="col">
          <el-tag v-if="col.scope.row.withinStatus === '未开始'" type="danger">{{ $t('market.notStarted') }}</el-tag>
          <el-tag v-else-if="col.scope.row.withinStatus === '生产中'">{{ $t('market.inProduct') }}</el-tag>
          <el-tag v-else-if="col.scope.row.withinStatus === '已完成'" type="success">{{ $t('market.offStock') }}</el-tag>
        </template>
        <template v-slot:text4Slot="col">
          <el-tag v-if="col.scope.row.softwareStatus === '未开始'" type="danger">{{ $t('market.notStarted') }}</el-tag>
          <el-tag v-else-if="col.scope.row.softwareStatus === '生产中'">{{ $t('market.inProduct') }}</el-tag>
          <el-tag v-else-if="col.scope.row.softwareStatus === '已完成'" type="success">{{ $t('market.offStock') }}</el-tag>
        </template>
        <template v-slot:text5Slot="col">
          <el-tag v-if="col.scope.row.packingStatus === '未开始'" type="danger">{{ $t('market.notStarted') }}</el-tag>
          <el-tag v-else-if="col.scope.row.packingStatus === '生产中'">{{ $t('market.inProduct') }}</el-tag>
          <el-tag v-else-if="col.scope.row.packingStatus === '已完成'" type="success">{{ $t('market.offStock') }}</el-tag>
        </template>
      </jc-table>
      <div style="margin-top: 5px;">
        <el-tabs v-model="departmentId2" type="card" @tab-click="headlines1">
          <el-tab-pane v-for="item in numData" :key="item.fid" :label="item.fname" :name="item.fid+''" />
        </el-tabs>
      </div>
      <div>
        <jc-pagination
          :total="total5"
          :page.sync="pageNum5"
          :limit.sync="pageSize5"
          @pagination="headlines"
        />
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div class="options_1">
          {{ $t('market.proOverfulfil') }}<!--生产超领物料报表-->
          <filtration
            :condition="1"
            ftype="scclwl"
            :table-header="tableHeader3"
            :detail-header="tableHeader3"
            @seachData="yearAssets3"
          />
        </div>
        <div>
          <el-date-picker
            v-model="value3"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
          <el-button class="btn" type="primary" size="mini" @click="yearAssets3">{{ $t('btn.search') }}</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData3"
        :table-header="tableHeader3"
        table-height="350px"
      />
      <div style="margin-top: 5px;">
        <el-tabs v-model="departmentId3" type="card" @tab-click="yearAssets">
          <el-tab-pane v-for="item in storeData" :key="item.fid" :label="item.fname" :name="item.fid+''" />
        </el-tabs>
      </div>
      <div>
        <jc-pagination
          :total="total3"
          :page.sync="pageNum3"
          :limit.sync="pageSize3"
          @pagination="yearAssets"
        />
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div class="options_1">
          {{ $t('market.proCapacity') }}<!--生产产能报表-->
        </div>
        <div>
          <el-button type="primary" size="mini" @click="yearIncome">{{ $t('btn.reload') }}</el-button>
        </div>
      </div>
      <jc-table
        :table-data="tableData4"
        :table-header="tableHeader4"
        table-height="350px"
      />
    </div>
    <!--生产订单进度-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.proSchedule')"
      :visible.sync="productVisible"
      width="70%"
      center
      :close-on-click-modal="false"
    >
      <div>
        <jc-table
          serial
          :table-data="tableData2"
          :table-header="tableHeader2"
          table-height="500px"
        >
          <!--        审核状态-->
          <template v-slot:btnStates="col">
            <el-tag v-if="col.scope.row.status === '未开始'" type="warning">{{ $t('market.notStarted') }}</el-tag>
            <el-tag v-else type="success">
              {{ $t('market.offStock') }}
            </el-tag>
          </template>
        </jc-table>
      </div>
      <div>
        <jc-pagination
          :total="total2"
          :page.sync="pageNum2"
          :limit.sync="pageSize2"
          @pagination="monthIncome"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryTprdMoentrySaleReport, queryTPrdSupplemententryReport,
  queryTprSumReport, queryProductionDayReport, querySaleTprSumReport
} from '@/api/homePage/product'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import picker from '@/components/Search/picker'
import { toMxBmina } from '@/components/ToMxamineState'
import { queryProductExceptionList } from '@/api/homePage/business'
import filtration from '@/components/filtration'
export default {
  name: 'ManageHome',
  components: {
    filtration
  },
  mixins: [picker],
  data() {
    return {
      productVisible: false,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      ftype: 2052,
      tableHeight: '350px',
      storeData: [],
      departmentId2: '',
      departmentId3: '',
      departmentId4: '',
      value2: [],
      value3: [],
      tableData: [],
      tableHeader: [
        { label: this.$t('market.date1'), prop: 'date', width: '100' },
        { label: this.$t('market.plaint'), prop: 'department', width: '120' },
        { label: this.$t('market.exception'), prop: 'exception' },
        { label: this.$t('market.abnormal1'), prop: 'abnormal' }
      ],
      value1: '',
      total1: 0,
      pageNum1: 1,
      pageSize1: 20,
      tableData1: [],
      tableHeader1: [],
      total2: 0,
      pageNum2: 1,
      pageSize2: 20,
      proDate: 1,
      tableData2: [],
      tableHeader2: [
        { label: this.$t('market.fdate'), prop: 'fdate' },
        { label: this.$t('market.workshop'), prop: 'departmentName' },
        { label: this.$t('menu.marketManage'), prop: 'fsaleorderno' },
        { label: this.$t('menu.collect'), prop: 'fbillno' },
        { label: this.$t('shop.fmodel'), prop: 'fmodel' },
        { label: this.$t('shop.fnumber1'), prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.productNum'), prop: 'fqty' },
        { label: this.$t('market.instockqty'), prop: 'fcompleteqty' },
        { label: this.$t('market.fdeliverydate'), prop: 'fdeliverydate' },
        { label: this.$t('market.fplanfinishdate'), prop: 'fplanfinishdate' },
        { label: this.$t('market.proStatus'), type: 'states', prop: 'status' }
      ],
      total3: 0,
      pageNum3: 1,
      pageSize3: 20,
      tableData3: [],
      tableHeader3: [
        { label: this.$t('market.overfulfil'), prop: 'fdate' },
        { label: this.$t('menu.marketManage'), prop: 'fsaleorderno' },
        { label: this.$t('menu.collect'), prop: 'fbillno' },
        { label: this.$t('market.overfulMater'), prop: 'fname' },
        { label: this.$t('market.model'), prop: 'fmodel' },
        { label: this.$t('shop.fnumber1'), prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.mustqty'), prop: 'fmustqty' },
        { label: this.$t('market.realqty'), prop: 'fpickedqty' },
        { label: this.$t('market.overfulqty'), prop: 'factualqty' },
        { label: this.$t('market.overfuldept'), prop: 'departmentName' },
        { label: this.$t('market.picker'), prop: 'fpickerUser' },
        { label: this.$t('market.sendingPeople'), prop: 'fapproverUser' }
      ],
      tableData4: [],
      tableHeader4: [
        { label: this.$t('market.deaprt'), prop: 'depart', width: '100' },
        { label: this.$t('market.month2'), prop: 'jihua', width: '100' }
        // { label: this.$t('market.plannedNumber'), prop: 'fqty', width: '100' },
        // { label: this.$t('market.capacity'), prop: 'fcompleteqty', width: '100' },
        // { label: this.$t('market.stiffqty'), prop: 'fqty', width: '100' },
        // { label: this.$t('market.freadyqty'), prop: 'freadyqty', width: '100' }
      ],
      total5: 0,
      pageNum5: 1,
      pageSize5: 20,
      tableData5: [],
      tableHeader5: [
        { label: this.$t('market.order'), prop: 'fbillno' },
        { label: this.$t('market.fmodel2'), prop: 'fmodel' },
        { label: this.$t('shop.fnumber1'), prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.mobillNo'), prop: 'productionNo', type: 'tag' },
        { label: this.$t('market.productNum'), prop: 'fqty' },
        { label: this.$t('market.instockqty'), prop: 'fcompleteqty' },
        { label: this.$t('market.deliveryDate'), prop: 'fdeliverydate' },
        { label: this.$t('market.fplanfinishdate'), prop: 'fplanfinishdate' },
        { label: this.$t('market.lowerStatus'), prop: 'lowerStatus', type: 'text2' },
        { label: this.$t('market.withinStatus'), prop: 'withinStatus', type: 'text3' },
        { label: this.$t('market.softwareStatus'), prop: 'softwareStatus', type: 'text4' },
        { label: this.$t('market.packingStatus'), prop: 'packingStatus', type: 'text5' }
      ],
      fnumber: '',
      numData: [
        { fname: '餐台', fid: '1-1' },
        { fname: '餐椅', fid: '1-7' },
        { fname: '柜类', fid: '1-3' },
        { fname: '沙发', fid: '1-6' },
        { fname: '架类', fid: '1-4' }
      ]
    }
  },
  created() {
    this.headlines() // 销售报表
    this.pooAmount() // 异常
    this.yearAssets() // 生产超领物料报表
    this.yearIncome() // 生产产能
    this.productask() // 生产任务进度
    this.handledept() // bumen
    this.oldTabHeader5 = this.tableHeader5
    this.oldTabHeader3 = this.tableHeader3
    // 生产产能报表
    for (var j = 1; j < 13; j++) {
      this.tableHeader4.push({ label: j + '月', prop: j + 'yue' })
    }
    this.tableHeader4.push({ label: '合计', prop: 'sum' })
  },
  methods: {
    // 异常
    pooAmount() {
      queryProductExceptionList({}).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    // 查询部门
    async handledept() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_V_WORKSHOP' })
      this.storeData = RES.list
    },
    headlines1(tab) {
      this.fnumber = tab.name
      this.headlines()
    },
    // 销售报表
    headlines() {
      const DATA = {
        pageSize: this.pageSize5,
        pageNum: this.pageNum5,
        startDate: this.value2?.[0],
        endDate: this.value2?.[1],
        fnumber: this.fnumber
      }
      querySaleTprSumReport(DATA).then(res => {
        if (res.code === 0) {
          this.tableData5 = res.data.list
          this.total5 = res.data.total
        }
      })
    },
    headlines5(ev) {
      this.pageNum5 = 1
      if (ev && ev.fname) {
        this.customHandle5(ev)
        this.headlines()
      } else {
        this.headlines()
      }
    },
    // 方案 -- 自定义列表
    customHandle5(ev) {
      this.tableHeaders2 = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader5.forEach(res => {
            if (res.label === item) {
              this.tableHeaders2.push(res)
            }
          })
        })
        this.tableHeader5 = this.tableHeaders2
      } else if (ev.fname === '筛选方案') {
        this.tableHeader5 = this.oldTabHeader5
      }
    },
    // 生产订单进度报表
    monthIncome() {
      const DATA = {
        pageSize: this.pageSize2,
        pageNum: this.pageNum2,
        date: this.proDate,
        num: this.value1
      }
      queryTprdMoentrySaleReport(DATA).then(res => {
        if (res.code === 0) {
          this.tableData2 = res.data.list.map(item => {
            return (toMxBmina(item))
          })
          this.total2 = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 生产超领物料报表
    yearAssets() {
      const DATA = {
        pageSize: this.pageSize3,
        pageNum: this.pageNum3,
        departmentId: this.departmentId3,
        startDate: this.value3?.[0],
        endDate: this.value3?.[1]
      }
      queryTPrdSupplemententryReport(DATA).then(res => {
        if (res.code === 0) {
          this.tableData3 = res.data.list
          this.total3 = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    yearAssets3(ev) {
      this.pageNum3 = 1
      if (ev && ev.fname) {
        this.customHandle3(ev)
        this.yearAssets()
      } else {
        this.yearAssets()
      }
    },
    // 方案 -- 自定义列表
    customHandle3(ev) {
      this.tableHeaders = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader3.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.tableHeader3 = this.tableHeaders
      } else if (ev.fname === '筛选方案') {
        this.tableHeader3 = this.oldTabHeader3
      }
    },
    // 生产产能报表
    yearIncome() {
      const DATA = {
        departmentId: this.departmentId4
      }
      queryTprSumReport(DATA).then(res => {
        if (res.code === 0) {
          this.tableData4 = res.data
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 生产任务进度
    productask() {
      queryProductionDayReport({ date: this.value1 }).then(res => {
        if (res.code === 0) {
          this.tableData1 = [res.data]
          this.tableData1[0].state = '状态'
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 跳转
    pushView(ev) {
      this.$router.push({ path: `/proOrderDetails/${ev}` })
    },
    cellClick(row, column, cell, event) {
      this.productVisible = true
      this.proDate = column.property
      this.monthIncome() // 生产订单进度报表
    }
  }
}
</script>
<style lang="scss" scoped>
.product {
  background: #fff;
}
.pagination-container {
  padding: 0 !important;
}
.headlines {
  //margin-bottom: 10px;
}
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  .options_1 {
    padding: 5px;
    display: flex;
    align-items: center;
  }
}
.btn {
  margin-left: 10px;
}
.shijian {
  max-height: 35px;
  &::v-deep p {
    margin: 0;
    padding: 0;
  }
  &::v-deep img {
    max-width: 50px;
    max-height: 30px;
  }
}
.revenue {
  padding: 0 5px 15px;
  margin-top: 10px;
  display: flex;
  background-color: white;
  flex-direction: column;
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
    .btnTig {
      position: absolute;
      right: 0;
    }
  }
  &-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: nowrap;
    .revenue-main-lef {
      width: 49.8%;
    }
    .revenue-main-rig {
      width: 49.8%;
    }
  }
}
.headetail {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 5px 0;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 600;
      margin-right: 10px;
    }
    h2 {
      text-align: center;
      margin: 0 0 10px;
      padding: 0;
    }
  }
}
</style>
